<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js" type="application/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/csv-parse/dist/iife/sync.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/csv-stringify/dist/iife/sync.js"></script>
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css" type="text/css" rel="stylesheet" />
    <script src="./util.js"></script>
</head>
<body>
    <div id="app">
      <h3>原始数据:</h3>
      <el-row type="flex">
          <el-upload action="#" :http-request="onUploadFile1">
              <el-button size="small" type="primary">上传-1号原始文件</el-button>
          </el-upload>
          <el-upload action="#" :http-request="onUploadFile2" style="margin-left: 5px;">
              <el-button size="small" type="primary">上传-2号原始文件</el-button>
          </el-upload>
      </el-row>
      <template v-if="file1 && file2">
          <h3>输出数据:</h3>
          <el-row type="flex">
              <el-button size="small" type="success" @click="onDownloadFile1">下载-1号父母文件</el-button>
              <el-button size="small" type="success" @click="onDownloadFile2">下载-2号小孩文件</el-button>
              <el-button size="small" type="success" @click="onDownloadFile3">下载-3号返回文件</el-button>
          </el-row>
      </template>
    </div>
</body>
<script>
let { parse } = window.csv_parse_sync  
let { stringify } = window.csv_stringify_sync
new Vue({
    el: '#app',
    data() {
        return {
          file1: undefined,
          file2: undefined,
          file2Index: {},
          file2Target: undefined         
        }
    },
    created(){
    },
    methods: {
      async onUploadFile1({file}) {
          // console.log('onUploadFile1:', file)
          let file1Content = await readFileContent(file)
          this.file1 = file1Content.split('\n').map(item => item.trim()).filter(item => item)
          // console.log('读取文件1的内容:', this.file1)
      },
      async onUploadFile2({file}) {
          // console.log('onUploadFile2:', file)
          let file2Content  = await readFileContent(file)
          file2Content = file2Content.trim()
          let file2 = parse(file2Content, {
              delimiter: '|'
          })
          let file2Index = {}
          file2Index['Prd_BhnUpc'] = file2[0].indexOf('Prd_BhnUpc')
          file2Index['Track1'] = file2[0].indexOf('Track1')
          file2Index['Track2'] = file2[0].indexOf('Track2')
          file2Index['Proxy'] = file2[0].indexOf('Proxy')
          file2Index['PIN'] = file2[0].indexOf('PIN')
          file2Index['CVV'] = file2[0].indexOf('CVV')
          file2Index['Pan'] = file2[0].indexOf('Pan')
          this.file2 = file2
          this.file2Index = file2Index
          // console.log('读取文件2的内容:', this.file2)
      },
      getBarcode(index){
        let sequence = index;
        let sequenceStr = sequence.toString();
        let paddedSequence = '0'.repeat(6 - sequenceStr.length) + sequenceStr;
        let letters = ['A', 'B', 'C', 'D'];
        let list = []
        for (let i = 0; i < 4; i++) {
          let SerialNo = letters[i]+paddedSequence
          console.log('index',index,'SerialNo:', SerialNo)
          let f = this.file2Target.find(t=> t[10] === SerialNo)
          if(f){
            list.push(f[5])
          }else{
            list.push(undefined)
          }
        }
        return list
      },
      getFile1Target(){
        let list = [
          ['Sequence No.','UPC','Track 1','Track 2','Track 3','Barcode','PIN','PAN Number','Denomination','Expiry','SerialNo','Indue Serial'] 
        ]
        this.file1.forEach((item, index) => {
          let itemArr = Array(list[0].length).fill('')
          itemArr[5] = item
          itemArr[itemArr.length - 2] = generateNumber(index + 1)
          list.push(itemArr)
        })
        return list
      },
      getFile2Target(){
        let list = [
          ['Sequence No.','UPC','Track 1','Track 2','Track 3','Barcode','PIN','PAN Number','Denomination','Expiry','SerialNo','Indue Serial','CVV','Pcn'] 
        ]
        let file2Index = this.file2Index
        this.file2.forEach((item, index) => {
          if(index === 0) return
          let itemArr = Array(list[0].length).fill('')
          itemArr[0] = generateNumber(index, 5)
          itemArr[1] = item[file2Index['Prd_BhnUpc']]
          itemArr[2] = item[file2Index['Track1']]
          itemArr[3] = item[file2Index['Track2']]
          itemArr[5] = item[file2Index['Prd_BhnUpc']]+item[file2Index['Proxy']]
          itemArr[6] = item[file2Index['PIN']]
          itemArr[7] = item[file2Index['Proxy']]
          itemArr[10] = generateChildSerialNo(index)
          itemArr[12] = item[file2Index['CVV']]
          itemArr[13] = item[file2Index['Pan']]
          list.push(itemArr)
        })
        return list
      },      
      getFile3Target(){
        let list = [
          ['Parent','Children1','Children2','Children3','Children4'] 
        ]
        let list1 = this.getFile1Target()
        this.file2Target = this.getFile2Target()
        console.log('file2Target', this.file2Target)
        list1.forEach((item, index) => {
          if(index === 0) return
          let itemArr = Array(list[0].length).fill('')
          let barcodes = this.getBarcode(index)
          itemArr[0] = item[5]
          itemArr[1] = barcodes[0]
          itemArr[2] = barcodes[1]
          itemArr[3] = barcodes[2]
          itemArr[4] = barcodes[3]
          list.push(itemArr)
        })
        return list
      },
      onDownloadFile1(){
        let list = this.getFile1Target()
        let csv = stringify(list, {
            delimiter: '|'
        })
        downloadTextFile(csv, '1号父母文件.txt')
      },
      onDownloadFile2(){
        let list = this.getFile2Target()
        let csv = stringify(list, {
            delimiter: ','
        })
        // console.log(csv)
        downloadTextFile(csv, '2号小孩文件.txt')
      },
      onDownloadFile3(){
        let list = this.getFile3Target()
        let csv = stringify(list, {
            delimiter: ','
        })
        // console.log(csv)
        downloadTextFile(csv, '3号返回文件.txt')
      }      
    }
})
</script>
</html>